import React, { Component } from "react";
import { Row, Col } from "antd";
import PropTypes from "prop-types";
import { FormattedMessage } from "react-intl";
import messages from "@i18n/messages";
import {
  createInput,
  createCheckbox,
  createDataSourceOption,
} from "../factory";

class SelectProperties extends Component {
  static propTypes = {
    data: PropTypes.object.isRequired,
    node: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    onUpdate: PropTypes.func.isRequired,
  };

  render() {
    const { data, onChange, onUpdate } = this.props;
    const getInputOptions = property => ({
      size: "small",
      onChange,
      onEnter: onUpdate,
      data,
      property,
      getter: (data, property) => data.get(property),
    });
    const getCheckboxOptions = property => {
      return {
        size: "small",
        onChange: onUpdate,
        data,
        property,
        getter: (data, property) => !!data.get(property),
      };
    };
    const dataSourceOption = {
      onChange,
      onUpdate,
      data,
    };
    return (
      <>
        <Row
          className="row" type="flex"
          justify="space-between"
        >
          <span className="label">          
            <FormattedMessage {...messages.propertyPanelMultiple} />
          </span>
          {createCheckbox(getCheckboxOptions("multiple"))}
        </Row>
        <Row className="row">
          <Col span={10}>
            <span className="label">
              <FormattedMessage {...messages.propertyPanelPlaceholder} />
            </span>
          </Col>
          <Col span={14}>{createInput(getInputOptions("placeholder"))}</Col>
        </Row>
        {createDataSourceOption(dataSourceOption)}
      </>
    );
  }
}

export default SelectProperties;
